<template>
  <div class="word-main">
    <div id="word-echart" />
  </div>
</template>

<script>
import * as echarts from 'echarts'
import 'echarts-wordcloud'

export default {
  name: 'WordEchart',

  data() {
    return {

    }
  },

  mounted() {
    this.init()
  },

  methods: {
    init() {
      const wordEchart = echarts.init(document.getElementById('word-echart'))
      const option = {
        series: [{
          type: 'wordCloud',

          // The shape of the "cloud" to draw. Can be any polar equation represented as a
          // callback function, or a keyword present. Available presents are circle (default),
          // cardioid (apple or heart shape curve, the most known polar equation), diamond (
          // alias of square), triangle-forward, triangle, (alias of triangle-upright, pentagon, and star.

          shape: 'circle',

          // Keep aspect ratio of maskImage or 1:1 for shapes
          // This option is supported since echarts-wordcloud@2.1.0
          keepAspect: false,

          // A silhouette image which the white area will be excluded from drawing texts.
          // The shape option will continue to apply as the shape of the cloud to grow.

          // maskImage: maskImage, // 可以添加图片

          // Folllowing left/top/width/height/right/bottom are used for positioning the word cloud
          // Default to be put in the center and has 75% x 80% size.

          left: 'center',
          top: 'center',
          width: '95%',
          height: '95%',
          right: null,
          bottom: null,

          // Text size range which the value in data will be mapped to.
          // Default to have minimum 12px and maximum 60px size.

          sizeRange: [12, 60],

          // Text rotation range and step in degree. Text will be rotated randomly in range [-90, 90] by rotationStep 45

          rotationRange: [-90, 90],
          rotationStep: 45,

          // size of the grid in pixels for marking the availability of the canvas
          // the larger the grid size, the bigger the gap between words.

          gridSize: 8,

          // set to true to allow word to be drawn partly outside of the canvas.
          // Allow word bigger than the size of the canvas to be drawn
          // This option is supported since echarts-wordcloud@2.1.0
          drawOutOfBound: false,

          // if the font size is too large for the text to be displayed,
          // whether to shrink the text. If it is set to false, the text will
          // not be rendered. If it is set to true, the text will be shrinked.
          // This option is supported since echarts-wordcloud@2.1.0
          shrinkToFit: false,

          // If perform layout animation.
          // NOTE disable it will lead to UI blocking when there is lots of words.
          layoutAnimation: true,

          // Global text style
          textStyle: {
            fontFamily: 'sans-serif',
            fontWeight: 'bold',
            // Color can be a callback function or a color string
            color: function() {
              // Random color
              return 'rgb(' + [
                Math.round(Math.random() * 160),
                Math.round(Math.random() * 160),
                Math.round(Math.random() * 160)
              ].join(',') + ')'
            }
          },
          emphasis: {
            focus: 'self',

            textStyle: {
              textShadowBlur: 10,
              textShadowColor: '#333'
            }
          },

          // Data is an array. Each array item must have name and value property.
          data: [
            {
              name: '特使啦',
              value: 15
            },
            {
              name: '小米13',
              value: 16
            },

            {
              name: '艾灸向前冲',
              value: 17
            },

            {
              name: '二傻大闹好莱坞',
              value: 156
            },

            {
              name: '华为Mate90',
              value: 123
            },
            {
              name: '苹果100',
              value: 167
            },
            {
              name: '月球人',
              value: 169
            },
            {
              name: '火星人',
              value: 167
            },
            {
              name: '啊!!!',
              value: 37
            },
            {
              name: '那我不就是祖师爷了',
              value: 78
            },
            {
              name: '梦里撒谎斗鱼',
              value: 94
            },
            {
              name: '收入很高',
              value: 36
            }
          ]
        }]
      }

      wordEchart.setOption(option)
    }
  }
}
</script>

<style lang="scss" scoped>
.word-main{
  width: 100%;
  height: 100%;

  #word-echart{
    width: 100%;
    height: 100%;
  }
}
</style>
